<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>班级学生列表</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
	<h3>
    <span id="section"></span>
	<span id="sort-options">  
        <label for="sort-select">排序：</label>  
        <select id="sort-select" onchange="fetchAndRender(this.value)">  
            <option value="id">学号</option>  
            <option value="name">姓名</option>  
            <option value="score">总成绩</option>  
        </select>  
    </span>  
	</h3>
    <table id="student-table">  
        <thead>  
            <tr>  
                <th>学号</th>  
                <th>姓名</th>  
				<th>性别</th>  
				<th>平时成绩</th>  
				<th>期中成绩</th>  
				<th>实验成绩</th>  
				<th>期末成绩</th>  
				<th>总成绩</th>  
            </tr>  
        </thead>  
        <tbody id="student-body">  
            <!-- 学生列表将在这里动态生成 -->  
        </tbody>  
    </table>  
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
	<div id="main" style="width: 100%; height: 400px"></div>
	<!-- 为消息提示框准备的Dom -->
	<div id="messageContainer"></div>
	<script src="../../js/echarts.min.js"></script>
    <script src="script.js"></script>  
</body>  
</html>